<template>
  <div class="loginbox">
    <header class="header">
      <ul>
        <router-link tag="li" to="/login">
          <span>登录</span>
        </router-link>
        <router-link tag="li" to="/register">
          <span>注册</span>
        </router-link>
      </ul>
    </header>
    <div class="content">
      <ul>
        <li>
          <input type="text" placeholder="手机号" v-model="tel" />
          <span class="tip">{{ teltip }}</span>
        </li>
        <li>
          <input type="password" placeholder="密码" v-model="password" />
          <span class="tip">{{ passwordtip }}</span>
        </li>
        <p>{{ tip }}</p>
        <button class="userBtn" @click="login">立即登录</button>
        <span class="forget_pwd" @click="findPwd">忘记密码？</span>
      </ul>
      <div class="local_th">
        <p>使用第三方登录</p>
        <div>
          <i class="iconfont icon-qq0" @click="qq_click"></i>
          <span>QQ</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from '@/utils/request'
import { Toast } from 'vant'
export default {
  data () {
    return {
      tel: JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')).tel : '',
      password: JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')).password : '',
      tip: ''
    }
  },
  computed: {
    teltip () {
      if (this.tel === '') {
        return ''
      } else if (this.tel.length !== 11) {
        return '手机格式不正确'
      } else {
        return ''
      }
    },
    passwordtip () {
      if (this.password === '') {
        return ''
      } else if (this.password.length < 6 || this.password.length > 18) {
        return '密码长度在6-18之间'
      } else {
        return ''
      }
    }
  },
  methods: {
    qq_click () {
      Toast('暂不支持QQ登录')
    },
    findPwd () {
      this.$router.push('/user/findpwd')
    },
    login () {
      if (this.tel === '' || this.teltip !== '') {
        this.tip = '请输入正确格式的手机号'
        return ''
      }
      if (this.password === '' || this.passwordtip !== '') {
        this.tip = '请输入正确格式的密码'
        return ''
      }
      this.tip = ''
      axios.post('/users/login', {
        tel: this.tel,
        password: this.password
      }).then(res => {
        if (res.data.code !== '200') {
          this.tip = res.data.message
        } else {
          this.tip = ''
          const token = res.data.token
          localStorage.setItem('token', token)
          localStorage.setItem('userid', res.data.userid)
          localStorage.setItem('tel', res.data.tel)
          sessionStorage.kg = true
          this.$router.push('/home')
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import "@/lib/reset.scss";
.loginbox {
  @include rect(100%, auto);
  .header {
    @include rect(100%, 0.55rem);
    @include border(0 0 1px 0, solid #bfbfbf);
    @include background-color(#f8f8f8);
    @include color(#777);
    @include font-size(16px);
    @include line-height(.51rem);
    ul {
      @include flexbox();
      @include justify-content();
      li {
        @include rect(0.88rem, 100%);
        @include text-align();
        &:nth-child(1) {
          span {
            @include display(inline-block);
            @include rect(auto, 0.42rem);
            @include color(#f0506e);
            @include border(0 0 .04rem 0, #f0506e, solid);
          }
        }
      }
    }
  }
  .content {
    ul {
      li {
        line-height: 50px;
        border-bottom: 1px solid #efefef;
        &:nth-child(1) {
          i {
            position: absolute;
            font-size: 20px;
            color: #a1a1a1;
            left: 34px;
            top: 60px;
          }
        }
        &:nth-child(2) {
          i {
            position: absolute;
            font-size: 20px;
            color: #a1a1a1;
            left: 32px;
            top: 121px;
          }
        }
        &:nth-child(3) {
          i {
            position: absolute;
            font-size: 20px;
            color: #a1a1a1;
            left: 32px;
            top: 182px;
          }
        }
        input {
          outline: none;
          border: 0;
          display: inline-block;
          width: 56%;
          margin: 5px 2%;
          line-height: 50px;
          text-indent: 20px;
        }
        span {
          display: inline-block;
          width: 40%;
        }
        .tip {
          color: #f66;
          text-align: center;
        }
      }
      p {
        height: 30px;
        text-align: center;
        color: #f66;
      }
      .userBtn {
        line-height: 45px;
        width: 90%;
        margin: 0 5%;
        color: #fff;
        font-size: 18px;
        border: 0;
        outline: none;
        background-color: #ff3861;
        border-radius: 3px;
      }
      .forget_pwd {
        @include flexbox();
        @include justify-content(flex-end);
        @include margin(.3rem 5%);
      }
    }
    .local_th {
      position: relative;
      width: 100%;
      height: 1.2rem;
      text-align: center;
      margin: 0.6rem 0 0 0;
      border-top: 1px solid #e8e8e8;
      p {
        position: absolute;
        width: 1.5rem;
        height: 0.3rem;
        background-color: #fff;
        line-height: 0.3rem;
        top: -0.15rem;
        left: 1.1rem;
        font-size: 15px;
        color: #bbb;
      }
      div {
        line-height: 0.55rem;
        margin-top: 0.3rem;
        text-align: center;
        i {
          display: inline-block;
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 50%;
          background-color: orange;
          font-size: 28px;
          color: #fff;
        }
        span {
          display: block;
          font-size: 12px;
          color: #999;
          margin-top: -20px;
        }
      }
    }
  }
}
</style>
